<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText">{{hid}}
			</block>
		</cu-custom>
		<uni-video :playUrl="playUrl"></uni-video>
		<view class="margin-top">
			<view class="text-center margin" v-if="actionText">{{actionText}}</view>
			<view class="flex margin-top">
				<view class="flex-sub grid col-2">
					<view>
						<view id='ptzZoomOut' class="cu-btn block margin-xs text-white" size="mini"
							:style="[{backgroundColor:themeConfig.primaryColor}]" @tap='tapAction'>
							{{$t('ptz')}}{{$t('zoomOut')}}</view>
					</view>
					<view>
						<view id='ptzZoomIn' class="cu-btn block margin-xs text-white " size="mini"
							:style="[{backgroundColor:themeConfig.primaryColor}]" @tap='tapAction'>
							{{$t('ptz')}}{{$t('zoomIn')}}</view>
					</view>
					<view>
						<view id='zoomOut' class="cu-btn block margin-xs text-white" size="mini"
							:style="[{backgroundColor:themeConfig.primaryColor}]" @tap='tapAction'>{{$t('zoomOut')}}
						</view>
					</view>
					<view>
						<view id='zoomIn' class="cu-btn block margin-xs text-white " size="mini"
							:style="[{backgroundColor:themeConfig.primaryColor}]" @tap='tapAction'>{{$t('zoomIn')}}
						</view>
					</view>
					<view>
						<view id='aroundHorizontal' class="cu-btn block margin-xs text-white" size="mini"
							:style="[{backgroundColor:themeConfig.primaryColor}]" @tap='tapAction'>
							{{$t('around')}}{{$t('horizontal')}}</view>
					</view>
					<view>
						<view id='aroundVertical' class="cu-btn block margin-xs text-white " size="mini"
							:style="[{backgroundColor:themeConfig.primaryColor}]" @tap='tapAction'>
							{{$t('around')}}{{$t('vertical')}}</view>
					</view>
					<view>
						<view class="cu-btn block margin-xs text-white bg-red" size="mini" @tap='stopVideo()'>
							{{$t('close')}}</view>
					</view>
				</view>
				<view class="flex-sub flex justify-center">
					<view style="width:240rpx;height:240rpx;border-radius:50%;"
						:style="[{backgroundColor:themeConfig.primaryColor}]">
						<view class="flex align-center justify-center" style="width:240rpx;height:80rpx;">
							<view id='ptzUp' class="cuIcon-fold text-xxl text-white" @tap='tapAction'></view>
						</view>
						<view class="flex align-center justify-between" style="width:240rpx;height:80rpx;">
							<view id='ptzLeft' class="cuIcon-back text-xxl text-center text-white"
								style="width:80rpx;height:80rpx;line-height:80rpx" @tap='tapAction'>
							</view>
							<view style="border-radius: 50%;height: 80rpx;width: 80rpx;border:1px solid #FFF">
							</view>
							<view id='ptzRight' class="cuIcon-right text-xxl text-center text-white"
								style="width:80rpx;height:80rpx;line-height:80rpx" @tap='tapAction'>
							</view>
						</view>
						<view class="flex align-center justify-center text-white" style="width:240rpx;height:80rpx;">
							<view id='ptzDown' class="cuIcon-unfold text-xxl text-bold" @tap='tapAction'></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		showToast
	} from '@/util/toast.js'
	import * as deviceCameraApi from '@/api/camera/cameraApi.js'
	import UniVideo from '@/components/ztn-custom/UniVideo/index.vue'
	import * as storage from '@/util/storage.js'
	export default {
		data() {
			return {
				playUrl: '',
				actionText: null,
				cameraId: null,
				hid: null,
				pushTime: 60,
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		components: {
			UniVideo
		},
		onLoad(option) {
			this.initOption = option
			this.init()
		},
		onUnload() {
			deviceCameraApi.stopCloud({
				cameraId: this.cameraId,
			})
		},
		methods: {
			init() {
				this.cameraId = this.initOption.cameraId
				this.hid = this.initOption.hid
				this.pushCloud()
			},
			pushCloud() {
				let mediaType = 'hls'
				//#ifdef MP-WEIXIN
				mediaType = 'rtmp'
				//#endif
				deviceCameraApi.pushCloud({
					mediaType: mediaType,
					cameraId: this.cameraId,
					pushTime: this.pushTime
				}).then((res) => {
					const {
						data
					} = res
					if (data) {
						const playUrl = data.playUrl
						if (playUrl) {
							this.playUrl = playUrl
						} else {
							showToast(this.$t('address') + this.$t('error'), 'none', 1000, false) //'播放地址无效'
						}
					} else {
						showToast(this.$t('failure'), 'none', 1000, false) //'推流失败'
					}
				})
			},
			stopVideo() {
				deviceCameraApi.stopCloud({
					cameraId: this.cameraId,
				}).then(res => {
					const {
						data
					} = res
					if (data) {
						showToast(this.$t('success'), 'none', 1000, false) //发送命令成功
					} else {
						showToast(this.$t('failure'), 'none', 1000,
							false) //'推流失败'
					}
				})
			},
			tapAction(e) {
				this.actionText = e.currentTarget.dataset.label
				deviceCameraApi.sendActionCommand({
					cameraId: this.cameraId,
					action: e.currentTarget.id,
				}).then((res) => {
					const {
						data
					} = res
					if (data) {
						showToast(this.$t('success'), 'none', 1000, false) //发送命令成功
					} else {
						showToast(this.$t('failure'), 'none', 1000, false)
					}
				})
				setTimeout(() => {
					this.actionText = null
				}, 4000);
			},

		},
		onShareAppMessage(res) {
			const cameraId = this.cameraId
			const nickName = storage.getNickName()
			const shortCompanyName = storage.getShortCompanyName()
			return {
				title: `${nickName}${this.$t('share')}${shortCompanyName}`,
				path: `/pages/cameraPlayer/cameraPlayer?cameraId=${cameraId}`,
				success: (res) => {
					// console.log(res)
				}
			}
		}
	}
</script>

<style scoped>
</style>
